«IDOCTYPE html> 
«html lang="en"> 
«head» 


«meta charset="UTF-8"> 
«meta http-equiv="X-UA-Compatible" content="IE=edge"> 
«meta name="viewport" content="width=device-width, initial-scale=1.0"> 


<title>Document</title> 


<script src="libs/gsap/gsap.min.js" defer></script> 
<script src="libs/gsap/ScrollTrigger.min.js" defer></script> 
<script src="libs/gsap/ScrollSmoother.min.js" defer></script> 


<link rel="stylesheet" href="css/main.css"> 
<script src="js/app.js" defer></script> 


</head> 
<body> 


<div class="wrapper"> 
<div class="content"> 


<header class="hero-section"> 
<img data-speed=".6" class-"hero" src="img/hero.png" 
alt="Alt" > 
<div class="container"> 
<div data-speed=".75" class="main-header"> 
«h1 class="main-title">creative scroll</h1> 
</div> 
</div> 
</header> 


<div class="portfolio"> 
<div class="container"> 
<main class="gallery"> 


<div data-speed=".9" class-"gallery left" 


<img class-"gallery item" 
src="img/work/1.jpg" alt="Alt"> 

<img class="gallery item" 
src="img/work/2.jpg" alt="Alt"> 


«div class="text-block gallery__item"> 
<h2 class="text- 
block__h">Creative floating scroll with amazing parallax effect</h2> 


«p class-"text-block  p'»Lorem 
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor amount 
scrolling.</p> 

</div> 


«img class-"gallery item" 
src-"img/work/6.jpg" alt="Alt"> 


</div> 
<div data-speed="1.1" class="gallery__right"> 


<div class="text-block gallery item" 
<h2 class="text- 
block__h">Creative floating scroll with amazing parallax effect</h2> 
«p class-"text-block  p'»Lorem 
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor amount 
scrolling.</p> 
</div> 
<img class-"gallery item" 
src-"img/work/4.jpg" alt="Alt"> 
«img class-"gallery item" 
src-"img/work/5.jpg" alt="Alt"> 
«img class-"gallery item" 
src-"img/work/3.jpg" alt="Alt"> 


</div> 
</main> 
</div> 


</div> 


</div> 
</div> 


</body> 
</html> 


